<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.js"></script>
    <script src="command/echarts/echarts-gl.js"></script>
    <script src="command/echarts-wordcloud.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:500px;"></div>
<script type="text/javascript">
    let tagsData = [];

    $.ajax({
        url: "/selectAppsTags",         //设置数据访问接口
        method:"GET",
        dataType:"json",
        async: false,
        success: function (data) {
            tagsData = data;
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });


    // 基于准备好的dom，初始化echarts实例
    var CompanyListChart = echarts.init(document.getElementById('main'));

    var option = {

        tooltip: {
            show: true
        },
        series: [{
            type: "wordCloud",
            gridSize:6,
            shape:'diamond',
            sizeRange: [12, 50],
            width:800,
            height:500,
            textStyle: {
                normal: {
                    color: function() {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: tagsData
        }]

    };

    // 使用刚指定的配置项和数据显示图表。
    CompanyListChart.setOption(option);
</script>
</body>
</html>